<script setup lang="ts">
import { ref } from "vue";

const green: string = "green"
const red: string = "red"
const message: string = "我是瑾语"
const num: number = 0
const peoples: string = "小王，小杨，小姚，小美"
const htmlMsg = "<b>htmlMsg</b>"

const items: Array<number> = [1, 2, 3, 4, 5]
let itemTypes = []
interface student {
    name: string
    age: number
}
let st: student = {
    name: "喜羊羊",
    age: 18
}
let st1: student = {
    name: "美羊羊",
    age: 18
}
itemTypes.push(st)
itemTypes.push(st1)

let clickMsg: string = ""
const parent = () => {
    clickMsg = "parent"
    console.log("parent")
}
const child = () => {
    clickMsg = "child"
    console.log("child")
}

const sub = () => {
    alert("点击提交")
}

const inputMsg = ref("test")
</script>

<template>

    <img alt="Vue logo" src="./assets/logo.png" />
    <br>
    {{ message }}
    <div>{{ num == 0 ? "我是瑾语" : "我不是瑾语" }}</div>
    <br>
    {{ message + "1" }}
    <br>
    {{ peoples.split(',') }}
    <br>
    <b>下面是vue 指令</b>

    <br>
    <span>显示文本v-text</span>
    <div v-text:="message"></div>

    <br>
    <span>显示html v-html</span>
    <div v-html:="htmlMsg"></div>

    <br>
    <span>判断v-if</span>
    <div v-if:="num == 0">
        我是瑾语
    </div>
    <div v-else-if:="num == 1">
        我不是瑾语
    </div>
    <div v-else>
        我谁也不是
    </div>

    <br>
    <span>显示隐藏 v-show</span>
    <div v-show="num == 0">显示</div>
    <br>
    <span>循环 v-for</span>
    <div v-for="item in items" :key="item">{{ item }}</div>
    <div v-for="itemType in itemTypes">
        {{ itemType.name }},今年{{ itemType.age }}岁
    </div>

    <br>
    <span>绑定事件,修饰符 v-on</span>
    <div v-on:click="parent" v-bind:class="'red'" style=" height: 200px;width: 200px;">
        <button @click.stop="child" :class="'green'" style="height: 100px;width: 100px;">
            点击{{ clickMsg }}</button>
    </div>

    <br>
    <span>vue 双向联动</span>
    <input type="text" v-model="inputMsg">
    {{ inputMsg }}
    <button type="submit" @click="sub">提交</button>

</template>

<style>
.green {
    background-color: green;
}

.red {
    background-color: red;
}
</style>
